<template>
	<view class="apply bg">
		<view class="top">
			<text v-if="saleType == 1">仅退款</text>
			<text v-if="saleType == 2">退款退货</text>
		</view>
		<view class="item">
			<view class="cont">
				<view class="cont-l">
					<image :src="proDetail.commodityPicture" mode="" class="img"></image>
				</view>
				<view class="cont-c">
					<view class="name">{{proDetail.commodityName}}</view>
					<view class="spec">{{proDetail.optionName}}</view>
					<view class="price">
						<text class="price-l">¥{{proDetail.marketingPrice}}</text>
						<text class="price-r">X{{proDetail.buyAmount}}</text>
					</view>
				</view>
			</view>
			<view class="total">
				<text class="total-l"></text>
				<text class="total-c">合计：</text>
				<text class="total-r">¥{{proDetail.money}}</text>
			</view>
		</view>
		
		<view class="reason" @click="showSeleteReason">
			<view class="reason-l">请选择您的问题</view>
			<view class="reason-r">
				<text v-if="reasonValue">{{reasonValue}}</text>
				<text v-if="!reasonValue">请选择</text>
			</view>
		</view>
		<view class="reason1">
			<view>退款说明(选填)</view>
			<textarea :value="content" placeholder="" />
		</view>
		
		<view class="bottom" :class="{'active': reasonKey!= ''}" @click="toConfirm">提交</view>
		
		<!-- 退款原因弹框 -->
		<uni-popup type="bottom" :show="specPopup" v-on:hidePopup="hidePopup">
			<view class="reseon-list">
				<view class="title">退款原因</view>
				<view class="r-item"
					v-for="(item,i) in reasonList" 
				 :key="i"
				 :class="{'select' : reasonKey == item.itemKey}"
					@click="seleteReason(item)">{{item.itemValue}}</view>
				<view class="button" @click="hidePopup">
					关闭
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../../components/uni-popup.vue'
	import Request from '../../../common/request.js'
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				orderId:'',
				commodityId:'',
				detailId:'', //订单商品明细Id
				specPopup: false,
				proDetail:[],
				reasonList:[],
				saleType: 1,//1.仅退款 2退货退款
				reasonKey: '',
				reasonValue:'',
				content:'',
			};
		},
		onLoad(option) {
			this.orderId = option.orderId;
			this.commodityId = option.commodityId;
			this.detailId = option.detailId
			this.getOrderData();
			this.getReasonList();
		},
		methods: {
			getOrderData(){
				Request.fetchPost('/fsbus/M2222',{
					orderId: this.orderId,
					commodityId: this.commodityId,
					detailId: this.detailId
				}).then(res=>{
					if(res.errorNo == 0){
						this.proDetail = res.results.mOrderDetail
					}
				}).catch(err=>{})
			},
			getReasonList(){
				let enumNo = ''
				if (this.saleType == 1) {
					enumNo = 'after_refund'
				} else if (this.saleType == 2){
					enumNo = 'after_refund_goods'
				}
				Request.fetchPost('/fsbus/M2224',{enumNo: enumNo}).then(res=>{
					if(res.errorNo == 0){
						this.reasonList = res.results.ReasonList
						console.log(res)
					}
				}).catch(err=>{})
			},
			
			toConfirm(){
				let params = {
					commodityId: this.commodityId,
					content: this.content,
					orderId: this.orderId,
					pictures:'',
					reason: this.reasonKey,
					saleType: this.saleType,
					detailId: this.proDetail.detailId,
				}
				Request.fetchPost('/fsbus/M2223', params).then(res=>{
					if(res.errorNo == 0){			
						uni.showToast({
								title: '申请成功',
								duration: 1000,
								icon:'success'
						});
					}
				}).catch(err=>{})
			},
			
			showSeleteReason() {
				this.specPopup = true;
			},
			seleteReason(item){
				this.reasonKey = item.itemKey;
				this.reasonValue = item.itemValue;
				this.hidePopup();
			},
			hidePopup(){
				this.specPopup = false;
			},
		},
	}
</script>

<style>
.top {
	width: 100%;
	height: 120upx;
	background-color: #fff;
	text-align: center;
	line-height: 120upx;
	color: #F52A4C;
	font-size: 30upx;
}
.item {
	width:100%;
	min-height: 200upx;
	background-color: #fff;
	margin-top: 20upx;
	padding: 20upx 30upx;
}

.item .cont {
	display: flex;
}
.item .cont2 {
	width: 100%;
}
.item .cont2 image {
	width: 150upx;
	height: 150upx;
	background-color: #A2A2A2;
	margin-right: 10upx;
}
.item .cont .cont-l {
	width: 150upx;
	height: 150upx;
	margin-right: 40upx;
}
.item .cont .cont-l .img {
	width: 100%;
	height: 100%;
	background-color: #A2A2A2;
}
.item .cont .cont-c {
	flex: 1;
}
.item .cont .name {
	font-size: 24upx;
	height: 50upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.item .cont .spec {
	color: #666666;
	font-size: 22upx;
	margin-bottom: 10upx;
}
.item .cont .price-l {
	float: left;
	color: #2E2E2E;
}
.item .cont .price-r {
	float: right;
	font-size: 22upx;
	color: #999999;
}
.item .total {
	height: 80upx;
	line-height: 80upx;
}
.item .total .total-l {
	width: 400upx;
	height: 80upx;
	display: inline-block;
	float: left;
}
.item .total .total-l text {
	color: #999;
}
.item .total .total-c {
	float: left;
	margin-left: 40upx;
}
.item .total .total-r{
	float: right;
	color: #F52A4C;
}
.reason {
	width: 100%;
	height: 160upx;
	line-height: 160upx;
	background-color: #fff;
	margin-top: 20upx;
	display: flex;
	padding: 0 30upx;
	border-bottom: 1px solid #ccc;
}
.reason .reason-l {
	font-size: 34upx;
	flex: 1;
}
.reason .reason-r {
	flex: 1;
	font-size: 30upx;
	color: #999;
	text-align: right;
}
.reason1 {
	width: 100%;
	background-color: #fff;
  padding: 30upx;
}
.reason1 view {
	margin-bottom: 30upx;
	font-size: 34upx;
}
.reason1 textarea {
	width: 689upx;
	height: 100upx;
	background-color: #F2F2F2;
	border: 1px solid #ccc;
	font-size: 24upx;
	padding:  5upx;
}
.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 118upx;
	background-color: #A2A2A2;
	color: #fff;
	line-height: 118upx;
	text-align: center;
	font-size: 30upx;
}
.bottom.active {
	background-color: #F52A4C;
}
.reseon-list {
	width: 100%;
	background-color: #fff;
}
.reseon-list .title {
	padding: 20upx 30upx;
}
.reseon-list .r-item {
	width: 100%;
	height: 120upx;
	line-height: 120upx;
	padding: 0 30upx;
	font-size: 34upx;
}
.reseon-list .r-item.select {
	color:#F52A4C;
}
.reseon-list  .button {
	width: 100%;
	height: 120upx;
	background-color: #F52A4C;
	color: #fff;
	font-size: 34upx;
	text-align: center;
	line-height: 120upx;
}

</style>
